<template>
  <v-layout type="main">

    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn" @click="$router.push({ path: '/user/detail' })">+ 新增</div>

        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.username" class="search" placeholder=""
            @input="getData" />
        </div>
      </div>
    </div>

    <el-table :data="tableData" @sort-change="onSortTime">
      <el-table-column sortable="custom" prop="username" label="用户名" />
      <el-table-column sortable="custom" prop="nick_name" label="昵称" />
      <el-table-column sortable="custom" prop="create_time" label="创建时间" />
      <el-table-column prop="name" label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="put(row.id)">修改</el-button>

          <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
            <p>您确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text">
              <i class="el-icon-delete delete-btn" />
              删除
            </el-button>
          </el-popover>

          <el-button type="text" @click="submitInitPassword(row.id)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { userLis, delUser, initPassword } from '@/api/user'
import { hasNotTerminatedJobByUser } from '@/api/dashboard'
export default {
  data() {
    return {
      tableData: [],
      checkedUser: {},
      showInit: false,
      codePic: '',
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        username: null
      },
    };
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      let res = await userLis({ ...this.Pagedata })
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    put(id) {
      this.$router.push({
        path: '/user/detail',
        query: { id }
      })
    },
    async del(id) {
      let ret = await hasNotTerminatedJobByUser({ id })
      if (ret && ret.data && ret.data == true) {
        alert('用户有未完全终止的任务');
        return;
      }
      await delUser({ id })
      this.getData()
    },

    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
    async submitInitPassword(id) {
      this.checkedUser.id = id
      await initPassword({ ...this.checkedUser })
      alert('重置密码成功')
    },
    onSortTime(column) {
      if (column.prop == 'username') {
        if (column.order == 'ascending') {
          this.sortKeyRet(this.tableData, 'username')
        } else {
          this.sortKey(this.tableData, 'username')
        }
      }
      else if (column.prop == 'nick_name') {
        if (column.order == 'ascending') {
          this.sortKeyRet(this.tableData, 'nick_name')
        } else {
          this.sortKey(this.tableData, 'nick_name')
        }
      }
      else if (column.prop == 'create_time') {
        if (column.order == 'ascending') {
          this.sortKeyRet(this.tableData, 'create_time')
        } else {
          this.sortKey(this.tableData, 'create_time')
        }
      }
    },
    //正序
    sortKey(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return ((x < y) ? -1 : (x > y) ? 1 : 0)
      })
    },
    //倒序
    sortKeyRet(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return ((x > y) ? -1 : (x < y) ? 1 : 0)
      })
    }

  }
}
</script>
<style lang="less" scoped></style>
